<template>
  <LoginHeader></LoginHeader>
  <div class="aaa">
    <!-- 轮播图区域 -->
    <div class="swiper">
      <van-swipe :loop=true autoplay="3000">
        <van-swipe-item v-for="banner in bannerList" :key="banner">
          <img :src="banner" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>

    <!-- 价格条 -->
    <div class="bannerConent">
      <!-- 左侧 特价 以及 金额 -->
      <div class="col">
        <!-- 文字 -->
        <div class="col_header">
          特价 | 距结束1天4小时
        </div>

        <!-- 金额 -->
        <div class="col_money">
          <span style="font-size: 0.36rem;">¥</span>
          <span style="font-weight: 700">{{ goodsDetail.retailPrice }}</span>
          &nbsp;
          <span style="font-size: 0.4rem; text-decoration:line-through;">¥{{ goodsDetail.counterPrice }}</span>
        </div>
      </div>

      <!-- 右侧图片 -->
      <div class="red_img">
        <img src="https://yanxuan.nosdn.127.net/static-union/1678945972c531b5.png">
      </div>
    </div>

    <!-- 开通会员 -->
    <div class="openVip">
      <!-- 左侧文本信息 -->
      <div class="openVip_text">
        <img class="imgUrl" src="https://yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" alt="">
        <span class="msg">
          Pro会员叠加优惠，再省
          <span>
            ¥0.8
          </span>
        </span>
      </div>
      <!-- 右侧开通 -->
      <span class="btn">开通</span>
    </div>

    <!-- 文本区域 -->
    <div class="baseInfo">
      <div class="info">
        <div class="name">{{ goodsDetail.name }}</div>
        <div class="simpleBrandInfo">
          <div>
            <img class="preLogo" src="https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png" alt="">
          </div>
          <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png">
          <span class="title">网易严选</span>
        </div>
        <div class="desc">推荐理由</div>
      </div>
      <div class="base_text">
        <div class="wrap">
          <div class="info-wrap">
            <div class="num">99.9%</div>
            <div class="com">好评率</div>
          </div>
          <van-icon class="icon" name="arrow" size="15px" />
        </div>
      </div>

    </div>

    <!-- 推荐理由 -->
    <div class="rcmdBanner">
      <div class="angleTop">
        <span class="angleContent"></span>
      </div>
      <ul>
        <li>
          <div class="key">1</div>
          <div class="recommendReason">刷头加宽，刷1分钟等于2分钟</div>
        </li>
        <li>
          <div class="key">2</div>
          <div class="recommendReason">48孔双重密植刷毛，口感像嚼棉花糖</div>
        </li>
        <li>
          <div class="key">3</div>
          <div class="recommendReason">螺旋刷丝&amp;尖细软毛，深入清洁牙龈沟</div>
        </li>
        <li>
          <div class="key">4</div>
          <div class="recommendReason">高颜值珠光刷柄，握感舒适更耐用</div>
        </li>
      </ul>
    </div>


    <div class="one_color"></div>
    <!--  -->
    <div class="none_action">

      <van-cell title="领券" @click="isShowActionSheet = !isShowActionSheet" is-link />
      <van-cell title="邮费:  满99包邮" @click="show1 = !show1" is-link />
      <van-cell title="购物返： 最高返1积分" @click="show2 = !show2" is-link />
      <div class="one_color"></div>
      <van-cell title="请选择规格数量" @click="show = !show" is-link />
      <van-cell @click="show4 = !show4" is-link>

        <template #title>
          <div>配送至：</div>
          <span>{{ addressvalue }}</span>
        </template>

      </van-cell>

      <van-cell title="服务" @click="show5 = !show5" is-link />
    </div>

    <div class="one_color"></div>

    <!-- 小轮播图 -->
    <div class="nav_sw">
      <van-swipe :loop=true :show-indicators=false autoplay="3000">
        <van-swipe-item>
          <img
            src="https://yanxuan.nosdn.127.net/14a84fa22a4b534861bd2262afc111b2.jpg?quality=75&type=webp&imageView&thumbnail=750x0">
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://yanxuan.nosdn.127.net/static-union/16795536589d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="one_color"></div>

    <!-- 分页评价 -->
    <div class="comment">
      <!-- 评价头部 -->
      <div class="comment_header">
        <div class="title">用户评价(37161)</div>
        <div class="good_comment">
          <div class="num">99.9%</div>
          <div class="com">好评率</div>
        </div>
        <van-icon class="icon" name="arrow" size="15px" />
      </div>
      <!-- 评价主体 -->
      <div class="comment_main">
        <div class="comment_main_header">
          <img
            src="https://yanxuan.nosdn.127.net/f0269f766889dfe9f52a0eecb5511dcb?type=webp&imageView&quality=75&thumbnail=60x60">
          <span class="username">小****</span>
        </div>
        <div class="extraInfo">
          <div class="timer">
            2023-01-12 21:39:38
          </div>
          <div class="skus">
            2支装(白+蓝)
          </div>
        </div>
        <div class="content1">
          <div class="inner">很好的牙刷 多次购买</div>
        </div>

        <div class="commentPics">
          <div class="commentPics_list">
            <img
              src="https://yanxuan.nosdn.127.net/809bf83d9399b8a7801e073e5adadb96.jpg?watermark&amp;type=2&amp;gravity=southeast&amp;dissolve=80&amp;font=c2ltZmFuZw==&amp;fontsize=400&amp;fontcolor=d2hpdGU=&amp;text=eXgxNjQ0NDY5MDU=|imageView&amp;quality=75&amp;thumbnail=144x0&amp;type=webp">
            <img
              src="https://yanxuan.nosdn.127.net/cb62e18860930de505c3f674e714f380.jpg?watermark&amp;type=2&amp;gravity=southeast&amp;dissolve=80&amp;font=c2ltZmFuZw==&amp;fontsize=400&amp;fontcolor=d2hpdGU=&amp;text=eXgxNjQ0NDY5MDU=|imageView&amp;quality=75&amp;thumbnail=144x0&amp;type=webp">
            <img
              src="https://yanxuan.nosdn.127.net/c65e8d385a879168c22450747552bbc4.jpg?watermark&amp;type=2&amp;gravity=southeast&amp;dissolve=80&amp;font=c2ltZmFuZw==&amp;fontsize=400&amp;fontcolor=d2hpdGU=&amp;text=eXgxNjQ0NDY5MDU=|imageView&amp;quality=75&amp;thumbnail=144x0&amp;type=webp">
            <img
              src="https://yanxuan.nosdn.127.net/6b8fab04b265750c31db64bb1d8ef419.jpg?watermark&amp;type=2&amp;gravity=southeast&amp;dissolve=80&amp;font=c2ltZmFuZw==&amp;fontsize=400&amp;fontcolor=d2hpdGU=&amp;text=eXgxNjQ0NDY5MDU=|imageView&amp;quality=75&amp;thumbnail=144x0&amp;type=webp">
          </div>
        </div>


      </div>
    </div>
    <div class="one_color"></div>

    <!-- 网易严选 -->
    <div class="wyyx">
      <div class="left">
        <img src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png">
      </div>
      <div class="info">
        <div class="info_header">
          网易严选
          <van-icon class="icon" name="arrow" size="15px" />
        </div>
        <div class="msg">
          以“让美好生活触手可及”为初心，网易严选逐步发展成为中国新中产喜爱的生活方式品牌。
        </div>
      </div>
    </div>
    <div class="one_color"></div>

    <!-- 产品参数 -->
    <div class="parameter">
      <div class="item">
        <div class="parameter_header">
          商品参数
          <!-- <van-divider :dashed="true" style="color: #333;"/> -->
        </div>

        <div class="parameter_body">
          <div class="msg">产品规格</div>
          <div class="num">两只装</div>
        </div>
      </div>
    </div>



    <!-- 底部购买 -->
    <div class="footer">
      <van-row>
        <van-col span="6">
          <van-icon class="icon" name="service-o" size="30" />
        </van-col>
        <van-col span="9" class="buy" @click="gobuy">立即购买</van-col>
        <van-col span="9" class="gocar"  @click="gocarssI" >加入购物车</van-col>
      </van-row>
    </div>


    <!-- 弹窗 -->
    <van-action-sheet v-model:show="show" :round="false">
      <van-icon class="icon1111" name="cross" @click="show = !show" />
      <div class="content12">
        <div class="content12_header">
          <div class="left">
            <img
              src="https://yanxuan-item.nosdn.127.net/f17a0f77a88e7012f7a5478563b818dc.png?type=webp&quality=90&thumbnail=200x200&imageView">
          </div>
          <div class="right">
            <van-tag type="warning" round class="tag">
              <div class="tags">特价</div>
            </van-tag>
            <div class="allprice">
              <div class="price">价格：¥{{ detaiInfoList.price }}</div>
              <span class="oldprice">¥9999</span>
            </div>
            <div class="sku">
              已选择：{{ }}
              <span class="it">请选择规格数量</span>
            </div>
          </div>
        </div>
        <div class="content12_content">
          <div class="spe">
            <div class="spe_header" v-for="saleAttrList in detaiInfoList.skuSaleAttrValueList">
              <dt class="spe_header_text">{{ saleAttrList.saleAttrName }}</dt>
              <van-button type="danger" plain>
                <dd class="tab_text">{{ saleAttrList.saleAttrValueName}}</dd>
              </van-button>
            </div>
          </div>
          <div class="num">
            <div class="num_text">数量</div>
            <van-stepper v-model="value" integer input-width="64px" button-size="33px" />
          </div>
        </div>

        <div class="footer">
          <van-row>
            <van-col span="6">
              <van-icon class="icon" name="service-o" size="30" />
            </van-col>
            <van-col span="9" class="buy" @click="gobuy">立即购买</van-col>
            <van-col span="9" class="gocar" @click="toCartHandle">加入购物车</van-col>
          </van-row>
        </div>
      </div>
    </van-action-sheet>


    <van-action-sheet v-model:show="isShowActionSheet" title="领券" :round="false" style="height: 300px;">
      <div class="content">假的</div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show1" title="邮费" :round="false" style="height: 300px;">
      <div class="content">假的</div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show2" title="购物返" :round="false" style="height: 300px;">
      <div class="content">依旧</div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show3" title="请选择规格数量" :round="false" style="height: 300px;">
      <div class="content">
        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。</div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show4" title="配送" :round="false" style="height: 300px;">
      <van-area v-model="addressvalue" :area-list="areaList" @confirm="affirm()"
        :columns-placeholder="['请选择', '请选择', '请选择']" />
    </van-action-sheet>
    <van-action-sheet v-model:show="show5" title="1" :round="false" style="height: 300px;">
      <div class="content">假的</div>
    </van-action-sheet>

  </div>
</template>

<script setup lang="ts">
import LoginHeader from '../../../components/LoginHeader/index.vue'
import detailApi, { type DetailListModel, skuInfoModel, anyObjmodel, skuSaleAttrValueListModel, skuImageListModel } from '../../../api/detail'
import { areaList } from '@vant/area-data';
import { numberKeyboardProps, showToast } from 'vant';
import { ref, onMounted } from 'vue'
import cartApi from '@/api/cart';
import { useRouter,useRoute } from 'vue-router';
import categoryApi from '@/api/category';

const show = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const addressvalue = ref('');
const value = ref('')
const router = useRouter()
const route = useRoute()
const goodsId = ref('')
const bannerList = ref<string[]>([])

const isShowActionSheet = ref(false)
const goodsNum = ref<number>()

const goodsDetail = ref<anyObjmodel>({})

const gobuy = () => {
  show.value = true
}

const gocarssI = () => {
  show.value = true

}



const toCartHandle = () => {
  toCart()
}

// 功能函数
const toCart = async () => {
  try {
    const res = await cartApi.addToCart('10','1')
    console.log(res);
    
    showToast('添加购物车成功')
    router.push('/cart')
  } catch (error) {
    console.log(error);
    
  }
}

/* 点击地址确定的回调 */
const affirm = () => {
  addressvalue
  show4.value = false

}


const detaiInfoList = ref<anyObjmodel>({})
const detailList = async () => {
  try {
    let result = await detailApi.getDetailList(2)
    console.log(result);
    detaiInfoList.value = result.skuInfo
  } catch (error) {
    console.log(error);
    
  }
}

onMounted(() => {
  detailList()
  goodsId.value = route.params.id as string
  getGoodsDetail()

})


const getGoodsDetail = async () => {
  try {
    const res = await categoryApi.getGoodsDetail(goodsId.value)
    const imgList = res.item.itemDetail
    delete imgList.detailHtml
    delete imgList.videoInfo
    for(let image in imgList){
      // console.log(imgList[image]);
      
      bannerList.value.push(imgList[image])
    }
    goodsDetail.value.name = res.item.name
    goodsDetail.value.retailPrice = res.item.retailPrice
    goodsDetail.value.counterPrice = res.item.counterPrice
  } catch (error) {
    console.log(error);
    
  }
}

</script>

<style lang="less" scoped>
/* 轮播图区域 */
.swiper {
  height: 375px;

  img {
    width: 375px;

  }

  .custom-indicator {

    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}

/* 轮播图下侧红图 */
.bannerConent {
  height: 74px;
  background-color: rgb(250, 30, 50);
  display: flex;
  align-items: center;

  /* 左侧文本 */
  .col {
    width: 285px;
    padding-left: 15px;


    .col_header {
      padding-top: 10px;
      font-size: 9px;
      line-height: 18px;
      color: #fff;
      margin: 0px 0px 4px;
    }

    .col_money {
      width: 285px;
      height: 40px;
      color: #fff;
      padding-top: 10px;
    }
  }

  /* 右侧图片 */
  .red_img img {
    width: 75px;
    height: 40px;
    padding-top: 10px;
  }
}

/* 开通会员 */
.openVip {
  display: flex;
  align-items: center;
  width: 345px;
  height: 40px;
  background-color: #fff1d2;
  margin: 18px 17.5px 9px;

  /* 文本信息 */
  .openVip_text {

    padding-left: 10px;

    .imgUrl {

      width: 21px;
      height: 12px;
      margin-right: 0.02rem;
      display: inline-block;
    }

    .msg {
      font-size: 12px;
      line-height: 25.5px;
      color: #333;
      margin-left: 1.15px;
      font-weight: 600;

      span {
        color: red;
      }
    }
  }


  /* 开通 */
  .btn {
    height: 24px;
    width: 48px;
    margin-left: 85px;
    background: #12161c;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    color: #f3ca84;
    border-radius: 0.42rem;
  }
}

/* 文本详情 */
.baseInfo {
  width: 360px;
  height: 75.5px;
  display: flex;
  padding-left: 15px;

  .info {
    padding: 0 12px 0 0;

    .name {
      width: 250px;
      font-size: 16px;
      margin: 0 0 2px;
    }

    .simpleBrandInfo {
      width: 259px;
      height: 28px;
      display: flex;
      margin: 3px 0 2.5px;

      .preLogo {
        width: 32px;
        height: 16px;
        margin: 0px 4px 0px 0px;
      }

      .brandLogo {
        width: 13px;
        height: 13px;
        margin: 6.5px 4px 0px 0px;
      }

      .title {
        font-size: 12px;
        margin: 6px 4px 0px 0px;
      }


    }

    .desc {
      font-size: 12px;
    }
  }

  .base_text {
    width: 89px;
    height: 75.5px;
    display: flex;
    align-items: center;
    text-align: center;

    .wrap {
      display: flex;

      .info-wrap {
        margin-left: 15px;

        .num {
          font-size: 16px;
          color: #dd1a21;
          font-weight: 700;
        }

        .com {
          font-size: 12px;
          line-height: 13.5px;
          color: #7f7f7f;
        }
      }

      .icon {
        padding-top: 10px;
      }
    }
  }


}

/*  */
.rcmdBanner {
  margin-bottom: 10px;
  margin-left: 15px;
  width: 345px;
  border-radius: 4px;
  line-height: .6rem;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 0.04rem;
  // position: relative;
  margin-top: 40px;

  ul {
    line-height: .6rem;
    padding: 10px;

    li {
      display: flex;

      .key {
        display: inline-block;
        width: 9px;
        height: 9px;
        border: 1px solid #dd1a21;
        border-radius: 50%;
        text-align: center;
        line-height: 9px;
        font-size: .2rem;
        color: #dd1a21;
        font-family: PingFang SC;
        font-weight: 700;
        margin-right: 4px;
        margin-top: 5px;
        margin-left: 4px;
        // vertical-align: middle;
      }

      .recommendReason {
        // height: 0.36rem;
        // line-height: 7px;
        font-size: 12px;
        color: #333;
      }
    }
  }



}


.content {
  padding: 16px 16px 160px;
  line-height: 15px;
  font-size: 14px;
  color: #7f7f7f;
}

/* 小轮播图 */
.nav_sw {
  img {
    width: 375px;
    height: 100px;
  }
}

/* 用户评价 */
.comment {
  // height: 246px;

  .comment_header {
    height: 45.8px;
    display: flex;
    margin-left: 15px;
    border-bottom: 1px solid #333;

    .title {
      font-size: 14px;
      color: #333;
      line-height: 45.8px;

    }

    .good_comment {
      display: flex;
      line-height: 45.8px;
      margin-left: 150px;

      .num {
        color: #dd1a21;
        font-size: 14px;
      }

      .com {
        font-size: 14px;
      }
    }

    .icon {
      line-height: 45.8px;

    }

  }

  .comment_main {
    .comment_main_header {
      display: flex;
      // padding: 15px 0px 2px;
      margin-left: 15px;
      align-items: center;
      line-height: 49px;

      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin: 0px 8px 0px 0px;
      }

      .username {
        font-size: 14px;
        margin: 8px 6px 0px 0px;
      }
    }

    .extraInfo {
      margin-left: 15px;
      display: flex;
      font-size: 12px;
      // align-items: center;
      color: #7f7f7f;


      .skus {
        margin: 0px 0px 0px 8px;
      }
    }

    .content1 {
      margin-left: 15px;
      margin-top: 6.75px;

      .inner {
        font-size: 14px;
        color: #333
      }
    }
  }

  .commentPics {
    display: flex;

    .commentPics_list {
      margin: 0.22rem 0 0.06rem;
    }

    .commentPics_list img {
      width: 72px;
      height: 72px;
      margin-left: 15px;
    }



  }
}

/* 网易精选 */
.wyyx {
  height: 103px;
  display: flex;

  img {
    margin: 25px 19.5px 0px 22.5px;
    width: 48px;
    height: 48px;
  }

  .info {
    .info_header {
      margin: 20px 10px 8px 0px;
      font-size: 16px;

      .icon {
        padding-left: 180px;
      }
    }

    .msg {
      margin-top: 13px;
      width: 270px;
      font-size: 12px;
      line-height: 13.5px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

}

/* 商品参数 */
.parameter {
  margin-left: 15px;
  height: 108px;

  .item {
    width: 345px;
    height: 78px;

    .parameter_header {
      font-size: 14px;
      color: #333;
      padding: 20px 0px 12px;
      border-bottom: 1px dashed #333;
    }

    .parameter_body {
      display: flex;
      padding-top: 15px;

      .msg {
        font-size: 12px;
        color: #999;
      }

      .num {
        margin-left: 35px;
        font-size: 12px;
        color: #333;
      }
    }
  }
}


.one_color {
  width: 375px;
  height: 10px;
  background-color: rgb(244, 244, 244, );
}

/* 底部 */
.footer {
  width: 375px;
  height: 52px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;


  .icon {
    // align-items: center;
    display: block;
    text-align: center;
    line-height: 52px;
    background-color: #fff;
  }

  .buy {
    font-size: 14px;
    border-left: 1px solid #ccc;
    text-align: center;
    line-height: 52px;
    background-color: #fff;
  }

  .gocar {
    font-size: 14px;
    border-left: 1px solid #ccc;
    text-align: center;
    line-height: 52px;
    background-color: rgb(221, 26, 33, );
    color: #fff;
  }
}


.icon1111 {
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}

.content12 {
  height: 280px;
  padding: 16px 16px 160px;

  .content12_header {
    width: 345px;
    height: 99px;
    display: flex;

    .left {
      img {
        width: 98px;
        height: 99px;
        background-color: #eee;
      }
    }

    .right {
      margin-top: 32px;
      margin-left: 10px;

      .tag {
        width: 32px;
        height: 16.6px;

        .tags {

          margin-left: 5px;
        }
      }


      .allprice {
        display: flex;

        .price {
          font-size: 14px;
          color: #dd1a21;

        }

        .oldprice {
          font-size: 12px;
          color: #999;
          margin: 0px 0px 0px 4px;
          padding-top: 4px;
          text-decoration: line-through
        }
      }

      .sku {
        font-size: 14px;
        color: #333;
      }
    }
  }

  .content12_content {
    margin-top: 30px;
    width: 345px;
    // height: 224px;
    max-height: 240px;

    .spe {
      .spe_header {
        margin-bottom: 10px;
        font-size: 14px;
        color: #333;
        padding: 0px 0px 6px;

        .spe_header_text {
          margin-bottom: 10px;
        }
      }

      .alltab {
        .tab {
          display: inline-block;
          position: relative;
          vertical-align: middle;
          border-radius: 4px;
          border: #e6e6e6 1px solid;
          padding: 0px 9px;
          font-size: .28rem;
          line-height: .72rem;
          height: 0.72rem;
          margin-right: 0.3rem;
          margin-bottom: 0.2rem;
          border-top: 1px solid #7f7f7f;
          border-bottom: 1px solid #7f7f7f;
          border-left: 1px solid #7f7f7f;
          border-right: 1px solid #7f7f7f;

          .tabtext {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }

    .num {
      margin-top: 20px;

      .num_text {
        font-size: 14px;
        color: #333;
        padding: 0px 0px 6px;
      }
    }
  }

  // line-height: 15px;
  // font-size: 14px;
  // color: #7f7f7f;
}

.active {
  color: green;
  border-color: green;
}
</style>
